<template>
  <div class="loginbg">
    <div class="loginbox">
      <input type="text" placeholder="用户名" v-model="user.username" />
      <input type="password" placeholder="密码" v-model="user.password" />
      <input type="text" placeholder="验证码" v-model="user.code" />
      <button @click="getCode">获取验证码</button>
      <input type="submit" value="登录" @click="loginAction" />
      <button @click="delp">测试删除产品</button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
import { getSms, loginAction, deleteProduct } from "@/http/api.js";
import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    return {
      pid: 4,
      user: {
        username: "zhangsanfeng",
        password: "123456",
        code: "",
        module: "login",
      },
    };
  },
  methods: {
    ...mapMutations(["setIsLogin", "setToken"]),
    ...mapActions(["getUserinfo"]),
    delp(){
      deleteProduct(this.pid)
      .then(res=>{
        console.log(res);
      })
      .catch(error=>{
        console.log(error);
      })
    },
    loginAction() {
      console.log("登录");

        loginAction(this.user)
        .then((res) => {
          if (res.status === 1000) {
            // 设置token 修改一下登录状态
            // this.$store.commit("setIsLogin", true);
            this.setIsLogin(true);
            // this.$store.commit("setToken", res.data.data.token);  // 存储到store
            this.setToken(res.data.token);
            localStorage.setItem("token", res.data.token); // 本地存储
            // 后台拿用户名

            // this.$store.dispatch('getUserinfo');  // 分发事件
            this.getUserinfo();
            const redirect = this.$route.query.redirect; // 获取重定向地址
            if (redirect) {
              this.$router.push({
                path: redirect,
              });
            } else {
              this.$router.push({
                name: "Home",
              });
            }
          } else {
            alert(res.data.msg);
          }
        })
        .catch((erro) => {
          console.log(erro);
        });
      // vuex 里面的state 只能通过mutations 修改  不能直接修改数据

      // this.$store.state.username = this.user.name; // 错误的方法 不能修改store里面的state
      // setTimeout(() => {
      //   // localStorage.setItem("token", "9527");

      //   this.$router.push({
      //     name: "Home",
      //   });
      // }, 2000);
    },
    getCode() {
      // 获取验证码
  
      if (this.user.username) {
        getSms(this.user)
        .then((res) => {
          console.log('ccccccccccccccccccccc');
          console.log(res);
          this.user.code = res.data.code;
        });
      } else {
        alert("输入用户名");
      }
    },
  },

  created() {
    const redirect = this.$route.query.redirect;

    console.log(redirect);
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.loginbg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("../assets/loginbg.jpg") no-repeat;
  background-position: 50% 50%;
  background-size: cover;

  .loginbox {
    width: 350px;
    // height: 300px;
    // border: 1px solid #aaa;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: rgba(0, 0, 139, 0.8);
    border-radius: 10px;

    box-shadow: 0 0 10px 0 darkblue;
    input {
      display: block;
      height: 40px;
      margin: 20px 0;
      padding: 0 10px;
      width: 100%;
    }
  }
}
</style>